<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3外观漂亮淡入淡出Tab菜单演示</title>

    <style>
        body {
            font-family: Cambria, Arial;
            background: #555;
        }
        
        .tabs {
            width: 100%;
            max-width: 600px;
            margin: 50px auto;
        }
        
        input {
            opacity: 0;
        }
        
        label {
            cursor: pointer;
            background: #999;
            color: #fff;
            border-radius: 4px 4px 0 0;
            padding: 1.5% 3%;
            float: left;
            margin-right: 2px;
        }
        
        label:hover {
            background: palegreen;
        }
        
        input:checked+label {
            background: palegreen;
            color: blueviolet;
        }
        
        .tabs input:nth-of-type(1):checked~.panels .panel:nth-of-type(1),
        .tabs input:nth-of-type(2):checked~.panels .panel:nth-of-type(2),
        .tabs input:nth-of-type(3):checked~.panels .panel:nth-of-type(3),
        .tabs input:nth-of-type(4):checked~.panels .panel:nth-of-type(4) {
            opacity: 1;
            transition: .9s;
        }
        
        .panels {
            float: left;
            clear: both;
            position: relative;
            width: 100%;
            background: #fff;
            border-radius: 0 10px 10px 10px;
            min-height: 315px;
        }
        
        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            background: #fff;
            border-radius: 0 10px 10px 10px;
            padding: 4%;
            box-sizing: border-box;
        }
        
        .panel h2 {
            margin: 0;
        }
    </style>

</head>

<body>

    <article class="tabs">

        <input checked id="one" name="tabs" type="radio">
        <label for="one">选项卡1</label>

        <input id="two" name="tabs" type="radio" value="Two">
        <label for="two">选项卡2</label>

        <input id="three" name="tabs" type="radio">
        <label for="three">选项卡3</label>

        <input id="four" name="tabs" type="radio">
        <label for="four">选项卡4</label>

        <div class="panels">

            <div class="panel">
                <h2>明月何皎皎</h2>
                <p>明月何皎皎，照我罗床帏。 忧愁不能寐，揽衣起徘徊。 客行虽云乐，不如早旋归。 出户独彷徨，愁思当告谁！ 引领还入房，泪下沾裳衣。
                </p>
            </div>

            <div class="panel">
                <h2>短歌行</h2>
                <p>
                    对酒当歌，人生几何！譬如朝露，去日苦多。 慨当以慷，忧思难忘。何以解忧？唯有杜康。 青青子衿，悠悠我心。但为君故，沉吟至今。 呦呦鹿鸣，食野之苹。我有嘉宾，鼓瑟吹笙。 明明如月，何时可掇？忧从中来，不可断绝。 越陌度阡，枉用相存。契阔谈讌，心念旧恩。(谈讌
                    一作：谈宴) 月明星稀，乌鹊南飞。绕树三匝，何枝可依？ 山不厌高，海不厌深。周公吐哺，天下归心。(海 一作：水)
                </p>
            </div>

            <div class="panel">
                <h2>七哀诗三首·其一</h2>
                <p>
                    西京乱无象，豺虎方遘患。 复弃中国去，委身适荆蛮。 亲戚对我悲，朋友相追攀。 出门无所见，白骨蔽平原。 路有饥妇人，抱子弃草间。 顾闻号泣声，挥涕独不还。 “未知身死处，何能两相完？” 驱马弃之去，不忍听此言。 南登霸陵岸，回首望长安， 悟彼下泉人，喟然伤心肝。
                </p>

            </div>

            <div class="panel">
                <h2>入若耶溪</h2>
                <p>艅艎何泛泛，空水共悠悠。 阴霞生远岫，阳景逐回流。 蝉噪林逾静，鸟鸣山更幽。 此地动归念，长年悲倦游。
                </p>

            </div>

        </div>

    </article>

</body>

</html>